import React, { useState } from 'react';
import styles from './index.module.css';
import { Button, Dropdown, Input, Upload } from '@alicloudfe/components';
import CustomIcon from '@/components/CustomIcon';
import ChatLoading from '../Loading';
import { IModel } from '@/AI/useAI';
import AtomIntl from '@/utils/intl';

export default function ChatInputArea(props) {
  const {
    currentModel,
    haveSetModelList,
    changeCurrentModel,
    selectedFile,
    setSelectedFile,
    uploadFileToOSS,
    uploading,
    showHistory = true,
    setHistoryVisible,
    openImgPreview,
    userQuestion,
    setUserQuestion,
    onInputAreaKeyUp,
    disableSendButton,
    sendQuestion,
    sendButton,
  } = props;

  const isSelectedImg = selectedFile && selectedFile.type === 'img';

  const [dropdownVisible, setDropdownVisible] = useState(false);

  return (
    <div className={styles.chatInputArea}>
      <div className={styles.inputOperations}>
        <div style={{ display: 'flex', gap: 8 }}>
          <Dropdown
            align="bl tl"
            offset={[0, -10]}
            onVisibleChange={(visible: boolean) => {
              setDropdownVisible(visible);
            }}
            trigger={
              <div
                className={styles.modelDropdownIcon}
                style={{
                  gap: 4,
                }}
              >
                {
                  currentModel ? (
                    <img
                      className={styles.inputAreaIcon}
                      src={currentModel.icon}
                    />
                  ) : (
                    AtomIntl.get('AI_Chat_ChatInputArea_index_选模型')
                  )
                }
                <CustomIcon type={!dropdownVisible ? 'icon-projectOtrilateral-down-fill' : 'icon-projectOtrilateral-up-line'} size={14} />
              </div>
            }
            triggerType={['hover']}
          >
            <div className={styles.modeListContainer}>
              {
                haveSetModelList.map((item: IModel) => (
                  <div
                    key={`${item.id}-${item.version}`}
                    className={styles.modelListItem}
                    data-actived={`${currentModel && currentModel.id === item.id && currentModel.version === item.version ? 'true' : ''}`}
                    data-model-key={item.id}
                    onClick={() => changeCurrentModel(item)}
                  >
                    <img
                      className={styles.inputAreaIcon}
                      src={item.icon}
                    />
                    <span>{item.name}</span>
                    <span>{item.version}</span>
                  </div>
                ))
              }
            </div>
          </Dropdown>
          {
            currentModel && currentModel.pictureSupport && (
              <div className={styles.modelDropdownIcon}>
                <Upload
                  accept=".png, .jpg, .jpeg"
                  beforeUpload={(file, options) => {
                    setSelectedFile({
                      fileObj: file,
                      type: 'img',
                    });
                    uploadFileToOSS(file);
                    return false;
                  }}
                  listType="card"
                >
                  <CustomIcon
                    type="icon-projectOimage-line"
                  />
                </Upload>
              </div>
            )
          }
          {
            currentModel && currentModel.docSupport && (
              <div className={styles.modelDropdownIcon}>
                <Upload
                  accept=".doc, .docx, .pdf"
                  beforeUpload={(file, options) => {
                    setSelectedFile({
                      fileObj: file,
                      type: 'file',
                    });
                    uploadFileToOSS(file);
                    return false;
                  }}
                  listType="card"
                >
                  <CustomIcon
                    type="icon-projectOupload-file-line"
                  />
                </Upload>
              </div>
            )
          }
        </div>
        <div>
          {
            showHistory && (
              <div
                className={styles.modelDropdownIcon}
                onClick={() => {
                  setHistoryVisible(true);
                }}
              >
                <CustomIcon
                  type="icon-projectOhistoryrecord-line"
                />
              </div>
            )
          }
        </div>
      </div>
      <div className={styles.userInputs}>
        {/* TODO 如果是文件的话，考虑是不是点击本地打开 */}
        <div className={styles.fileLine}>
          {
            (uploading) ? (
              <div style={{ height: 32 }}>
                <ChatLoading />
              </div>
            ) : (
              selectedFile && (
                <div className={styles.fileContainer} data-type={selectedFile.type}>
                  {
                    isSelectedImg ? (
                      <img
                        className={styles.previewImg}
                        src={selectedFile?.ossAddr}
                        onClick={openImgPreview}
                      />
                    ) : (
                      <>
                        <CustomIcon
                          type="icon-projectOfile-6-line"
                        />
                        <span className={styles.fileName}>{selectedFile?.fileObj?.name}</span>
                      </>
                    )
                  }
                  <div
                    className={styles.removeFile}
                    onClick={() => {
                      setSelectedFile(null);
                    }}
                  >
                    <CustomIcon type="icon-projectOdelete-fill" />
                  </div>
                </div>
              )
            )
          }
        </div>
        <div className={styles.inputArea}>
          <div style={{ flex: 1 }}>
            <Input.TextArea
              placeholder=""
              style={{
                width: '100%',
              }}
              aria-label="TextArea"
              autoHeight={{
                minRows: 4,
                maxRows: 8,
              }}
              value={userQuestion}
              onChange={(value) => {
                setUserQuestion(value);
              }}
              onKeyDown={onInputAreaKeyUp}
            />
          </div>
          <div
            style={{
              alignSelf: 'flex-end',
            }}
          >
            {
              sendButton || (
                <Button
                  type={disableSendButton ? 'normal' : 'primary'}
                  disabled={disableSendButton}
                  onClick={sendQuestion}
                >
                  {AtomIntl.get('AI_Chat_ChatInputArea_index_发送')}
                </Button>
              )
            }
          </div>
        </div>
      </div>
    </div>
  );
}

